<template>
	<view :style="$s.view_color">
		<my-navbar :name="nav_title"></my-navbar>
		<view class="info-box">
			<view class="title">手机验证码</view>
			<view class="text" v-if="!sendState">请输入手机号码，点击验证按钮获取验证码</view>
			<view class="tips" v-if="sendState">验证码已经发送到您的手机号码上，请留意</view>
			<view class="input"><input v-model="mobile" placeholder="请输入手机号码" type="number" /></view>
			<view>
				<u-message-input :maxlength="6" @finish="finish" :breathe="focus" font-size="40"></u-message-input>
				<u-button type="primary" @click="getCode()" :disabled="sendState">{{butText}}</u-button>
				<u-verification-code @start="codeStart" @end="codeEnd" @change="codeChange" ref="uCode"></u-verification-code>
			</view>
		</view>
		
	</view>
</template>

<script>
	import md5Libs from "@/common/md5";
	export default {
		data() {
			return {
				nav_title:'手机号码验证',
				nav:this.styleC.nav,
				getParams:{},
				mobile:'',
				butText:'',
				wifi_id:0,
				wifi_code:'',
				sendState:false,
				sendCode:'',
				focus:false,
			}
		},
		onLoad(option){
			this.getParams=option;
			this.wifi_id=this.getParams.id;
			this.wifi_code=this.getParams.code;
			this.initData();
			this.comm.getConfig().then(res=>{
				this.$u.mpShare = res.share;
			});
		},
		onShow(){
			
		},
		methods: {
			initData(){
				this.$u.api.wifiInfo({code:this.wifi_code}).then(res => {
					if(this.comm.isok(res,true)){
						this.sendCode = md5Libs.md5(res.data.wifi_code);
					}
				});
			},
			finish(code){
				let than=this;
				this.$u.api.smsCheck({wifi_id:this.wifi_id,mobile:this.mobile,code:code}).then(res=>{
					if(this.comm.isok(res,true)){
						this.comm.success('验证成功！','wifi/detail?id='+than.wifi_code);
					}
				});
			},
			codeChange(text){
				this.butText=text;
			},
			getCode(){
				if(this.mobile==''){
					this.$c.error('请先输入手机号码');
				}else if(!this.$u.test.mobile(this.mobile)){
					this.$c.error('手机号码格式不正确');
				}else{
					this.$u.api.smsSend({wifi_id:this.wifi_id,mobile:this.mobile,code:this.sendCode}).then(res=>{
						if(this.$c.isok(res,true)){
							this.$c.restUser();
							setTimeout(() => {
								this.$refs.uCode.start();
							}, 1000);
						}
					});
				}
			},
			codeStart(){
				this.sendState=true;
			},
			codeEnd(){
				this.sendState=false;
			}
		}
	}
</script>

<style lang="scss">
	page{
		background-color: #FFFFFF;
	}
	.info-box{
		background-color: #FFFFFF;
		margin:20px;
		padding: 20px;
	}
	.info-box view{
		margin-bottom: 20px;
	}
	.info-box .title{
		color: var(--view-theme);
		font-size: 25px;
	}
	.info-box .text{
		color: $u-tips-color;
	}
	.info-box .tips{
		color: $u-warning;;
	}
	.info-box .input input{
		text-align: center;
		color:var(--view-theme);
		font-size: 20px;
		border: 1px solid $u-border-color;
		padding: 12px 15px;
		border-radius: 10px;
	}
</style>
